import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
import { Route } from 'react-router-dom';

import Index from '../Index';
import FindHourse from '../FindHourse';
import My from '../My';


import '../../assets/fonts/iconfont.css';


class Home extends Component {

    state = {
        selectedTab: this.props.location.pathname,
        hidden: false,
        fullScreen: true
    }

    render() {
        return (
            <div>
                <div style={{ paddingBottom: '50px' }}>
                    {/* 首页组件 */}
                    <Route path="/home/index" component={Index}></Route>
                    {/* 找房组件 */}
                    <Route path="/home/findhourse" component={FindHourse}></Route>
                    {/* 我的组件 */}
                    <Route path="/home/my" component={My}></Route>
                </div>

                <div className="tabbar" style={{ position: 'fixed', height: '50px', width: '100%', bottom: 0 }}>
                    <TabBar
                        unselectedTintColor="rgb(136, 136, 136)"
                        tintColor="rgb(33, 185, 122)"
                        barTintColor="white"
                    >
                        <TabBar.Item
                            title="首页"
                            key="Home"
                            icon={<i className="iconfont icon-ind" ></i>}
                            selectedIcon={<i className="iconfont icon-ind" ></i>}
                            selected={this.state.selectedTab === '/home/index'}
                            onPress={() => {
                                this.setState({
                                    selectedTab: '/home/index',
                                });
                                this.props.history.push('/home/index')
                            }}
                            data-seed="logId"
                        >

                        </TabBar.Item>
                        <TabBar.Item
                            icon={
                                <i className="iconfont icon-findHouse"></i>
                            }
                            selectedIcon={
                                <i className="iconfont icon-findHouse"></i>
                            }
                            title="找房"
                            key="FindHouse"
                            selected={this.state.selectedTab === '/home/findhourse'}
                            onPress={() => {
                                this.setState({
                                    selectedTab: '/home/findhourse',
                                });
                                this.props.history.push('/home/findhourse')
                            }}
                            data-seed="logId1"
                        >

                        </TabBar.Item>
                        <TabBar.Item
                            icon={
                                <i className="iconfont icon-my"></i>
                            }
                            selectedIcon={
                                <i className="iconfont icon-my"></i>
                            }
                            title="我的"
                            key="my"
                            selected={this.state.selectedTab === '/home/my'}
                            onPress={() => {
                                this.setState({
                                    selectedTab: '/home/my',
                                });
                                this.props.history.push('/home/my');
                            }}
                        >

                        </TabBar.Item>

                    </TabBar>
                </div>

            </div>
        );
    }
}

export default Home;